/* 移动端通用样式（iphone6为例750*1334px） */
/* @theme_color : #4da3e6;
 */
/*在html中加<meta name="viewport" content="width=device-width,initial-scale=1">*/

html {
    font-size: 50px;
}

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
    font-family: "Microsoft YaHei", SimSun, SimHei;
}



/* 去除超链接默认样式 */
@theme_color:#4da3e6;   //主题色
a {
    text-decoration: none;
    color: #000;
}

.verticle(){
    /* 水平垂直居中方法 */
    position: absolute;
    //left: 0;
    //right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* 去掉Ios按钮默认样式 */

input[type="button"],
input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none;
}



/* 模块一：顶部标签栏 */
    @head_tab_h:0.88rem;
    #head_tab {
        height: @head_tab_h;
        font-size: 0.36rem;
        line-height: @head_tab_h;
        width: 100%;
        border-bottom: 0.01rem solid #ddd;
        text-align: center;
        position: relative;
        z-index: 999;
        top: 0;
        background: #fff;
        h2 {
            /*标签栏标题*/
            font-size: 0.36rem;
            height: @head_tab_h;
            line-height: @head_tab_h;
        }
    }



    /*返回位置图标 30px*30px*/
    .head_tab_side_set(left){
          display: block;
        .verticle;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-left: 0.3rem;
        font-size: 0.28rem;
         left: 0; /*向右浮动*/
    }
    .head_tab_side_set(right){
         display: block;
        .verticle;
        height: 0.3rem;
        line-height: 0.3rem;
        margin-right: 0.3rem;
        font-size: 0.28rem;
        right: 0; /*向左浮动*/
       
    }
    #head_tab .head_left {
        .head_tab_side_set(left);
        img{
             height: 100%;
        }
    }

    #head_tab .head_right {
        .head_tab_side_set(right);
        img{
             height: 100%;
        }
    }


/* 模块二：顶部导航 */
    //顶部导航布局选择设置 
    .head_nav_set(two){
        li{
         /*两栏布局*/
         width: 50%;
         box-sizing: border-box;
        /*防止内外边距和外框线把宽度撑开*/
        float: left;
        height: 100%;
        }
    }
      .head_nav_set(three){
        li{
         /*三栏布局*/
         width: 33.3%;
         box-sizing: border-box;
        /*防止内外边距和外框线把宽度撑开*/
        float: left;
        height: 100%;
        }
    }
     .head_nav_set(four){
        li{
         /*四栏布局*/
         width: 25%;
         box-sizing: border-box;
        /*防止内外边距和外框线把宽度撑开*/
        float: left;
        height: 100%;
        }
    }

    #head_nav {
        .head_nav_set(two); // 布局选择 
        margin: 0.2rem 0.3rem;
        height: 0.65rem;
        ul {
            border-radius: 0.1rem;
            border: 0.01rem @theme_color solid;
            /* 修改导航外框颜色*/
            height: 100%;
            box-sizing: border-box;
            li {
                .on {
                    color: #fff;
                    background-color: @theme_color;
                    /* 高亮状态背景颜色 */
                }
                a {
                    display: block;
                    font-size: 0.28rem;
                    text-align: center;
                    line-height: 0.65rem;
                    color: @theme_color;
                    /* 正常状态字颜色 */
                }
                &:last-child {
                    border-radius: 0 0.1rem 0.1rem 0;
                    border-right: 0rem solid @theme_color;
                }
                &:first-child {
                    border-radius: 0.1rem 0 0 0.1rem;
                }
            }
        }
    }


/*通用列表样式，适用于图片+1到2行文字布局，如消息列表，网关列表等*/
/* 模块四：消息列表 */
    //message_list
    #message_list{

    }

/*模块三：设置和个人中心界面*/
    .ul(){
        background-color: #fff;
        box-sizing: border-box;
        margin: 0.2rem 0;
        padding: 0 0.2rem;
    }   
    .li(){
        position: relative;
      //  padding: 10px 10px 15px 10px;
        overflow: hidden;
        border-bottom: 0.01rem solid #ddd;
        &:last-child {
            border-bottom: 0px #ddd solid;
        }
    }
    ///personal_list 
    #content_list_set{
        ul{
            .ul;
            li{
               .li; 
               height: 1.2rem;
                img{ /*图片尺寸30px*/
                    .verticle;
                    height: 30%;
                    &:last-child {
                        right: 0;
                    }
                    &:first-child {
                       left: 0;
                    }
                }
                div{
                    height: 1.2rem;
                    line-height: 1.2rem;
                    font-size: 0.28rem;
                    margin: 0 0.5rem;
                }
            }
        }
        
    }

    //message_list
    #message_list{
        ul{
            .ul;
            li{
                .li;
                .title{
                    margin:0.3rem 0 0.15rem 0;
                    /* height:0.3rem; */
                    .mask{
                        /* 消息是否已读标识 */
                        float: left;
                        height: 0.08rem;
                        width: 0.08rem;
                        border-radius: 50%;
                        margin:0.05rem;
                    }
                    .color{
                       /*  消息已读 */
                       background-color: #ff3600;
                    }
                    h5{
                        height: 100%;
                        line-height:100%;
                        font-size: 0.30rem;
                    }
                }
                .content{
                    margin: 0.15rem 0 0.3rem 0;
                    font-size: 0.26rem;
                }
            }
        }
    }


/*模块四：底部导航*/
    //底部导航布局选择设置 
    .foot_nav_common{//li样式
         box-sizing: border-box;
        /*防止内外边距和外框线把宽度撑开*/
        float: left;
        height: 100%;
        position: relative;
    }
      .foot_nav_set(three){
         /*三栏布局*/
         width: 33.3%;
         .foot_nav_common;
    }
     .foot_nav_set(four){
         /*四栏布局*/
         width: 25%;
         .foot_nav_common;
    }
     .foot_nav_set(five){
         /*五栏布局*/
         width: 20%;
         .foot_nav_common;
    }

    #foot_nav {
        position: fixed;
        /* fixed; */
        bottom: 0;
        left: 0;
        z-index: 2;
        background-color: #fff;
        height: 0.98rem;
        width: 100%;
        border-top: 0.01rem solid #ddd;
        ul{
            width: 100%;
            height: 0.98rem;
            line-height: 0.98rem;
            text-align: center;
            .on a div{
                color: @theme_color;
                /* 自行修改高亮字体颜色 */
            }
            li{
                img{    /*底部导航图标54px*54px*/
                    .verticle;
                    right:0;
                    left:0;
                    height: 0.54rem;
                    margin-top: 0.03rem;
                }
                .foot_nav_set(four);
                a{
                    display: block;
                    height: 100%;
                    width: 100%;
                }
                div{
                    position: relative;
                    bottom: -0.28rem;
                    color: #929292;
                    font-size: 0.2rem;
                }
            }
        }
    }
